<template>
  <div>
    <el-tag
        closable
        type="success"
        @close="closeTag"

    >
      团支书基本信息
    </el-tag>
  </div>

    <el-table
        :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
        style="width: 100%">
      <el-table-column label="学生基本信息">
        <el-table-column prop="name" label="姓名" width="140">
        </el-table-column>
        <el-table-column prop="gender" label="性别" width="140">
        </el-table-column>
        <el-table-column prop="class" label="班级" width="140">
        </el-table-column>
        <el-table-column prop="account" label="学号" width="140">
        </el-table-column>
        <el-table-column prop="credit" label="学分" width="140">
        </el-table-column>
        <el-table-column
            align="center">
          <template #header>
            <el-button type="primary" size="mini" icon="el-icon-plus" @click="handleAdd,drawer = true"
                       circle></el-button>
            <el-button type="primary" size="mini" icon="el-icon-search" @click="searchbox" circle></el-button>
            <!-- 首先将要过渡的元素用transition包裹，并设置过渡的name -->
            <transition name="mybox">
              <el-input
                  class="sear"
                  v-model="search"
                  size="mini"
                  v-show="searchshow"
                  placeholder="输入关键字搜索"/>
            </transition>
          </template>
          <template #default="scope">
            <el-button
                size="mini"
                icon="el-icon-edit"
                @click="handleEdit(scope.$index, scope.row),drawerupdate = true"></el-button>
            <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                @click="handleDelete(scope.$index, scope.row),delSubmit"></el-button>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>



<!--  新增数据-->
  <el-drawer
      title="新增数据"
      v-model="drawer"
      :direction="direction"
      :before-close="handleClose" destroy-on-close>
    <el-form ref="ruleFormsss" :model="studentaddform" label-width="80px">
      <el-form-item label="姓名">
        <el-input v-model="studentaddform.name"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="studentaddform.gender" placeholder="请选择性别">
          <el-option label="男" value="男"></el-option>
          <el-option label="女" value="女"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="班级">
        <el-input v-model="studentaddform.class"></el-input>
      </el-form-item>
      <el-form-item label="学号">
        <el-input v-model="studentaddform.account"></el-input>
      </el-form-item>
      <el-form-item label="学分">
        <el-input v-model="studentaddform.credit"></el-input>
      </el-form-item>
      <el-form-item label="上级管理员">
        <el-input v-model="studentaddform.SuperAdmin"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button @click="exit">取消</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
<!--  修改数据-->
  <el-drawer
      title="修改数据"
      v-model="drawerupdate"
      ref="drawerupdate"
      :direction="direction"
      :before-close="handleClose" destroy-on-close>
    <el-form ref="ruleFormsss" :model="studentupdateform" label-width="80px">
      <el-form-item label="姓名">
        <el-input v-model="studentupdateform.name"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="studentupdateform.gender" placeholder="请选择性别">
          <el-option label="男" value="男"></el-option>
          <el-option label="女" value="女"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="班级">
        <el-input v-model="studentupdateform.class"></el-input>
      </el-form-item>
      <el-form-item label="学号">
        <el-input v-model="studentupdateform.account"></el-input>
      </el-form-item>
      <el-form-item label="学分">
        <el-input v-model="studentupdateform.credit"></el-input>
      </el-form-item>
      <el-form-item label="上级管理员">
        <el-input v-model="studentupdateform.SuperAdmin"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="editStudentInfo_Submit">立即修改</el-button>
        <el-button @click="exit">取消</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>
<script lang="ts">
import {getCurrentInstance, reactive, ref, unref} from "vue";
import {ElMessage} from "element-plus";
import qs from "qs";
import {addStudentInfo} from "@/network/admin/addStudentInfo";
import {editStudentInfo} from "@/network/admin/editStudentInfo";
import {getStudentInfo} from "@/network/admin/getStudentInfo";
import {deleteStudent} from "@/network/admin/deleteStudent";
import {getAllStudentInfo} from "@/network/admin/getAllStudentInfo";
import {getLocalStudentOfThePS} from "@/network/admin/getLocalStudentOfThePS";

export default {
  name:'StudentOfTheYouthLeaguePartySecretary',
  props:['YouthLeaguePartySecretaryBiographyStudent'],
  data(){
    return{
      drawer: false,
      drawerupdate: false,
      searchshow: false,
      direction: 'rtl',
      tableData: [{
        name:'测试'
      }],
      search: '',


    }
  },
  setup(props){
    const ruleFormsss = ref(null);
    const {proxy}:any = getCurrentInstance();
    // const router=useRouter();
    // 定义变量
    const studentaddform = reactive({
      name: '',
      gender: '',
      class: '',
      account: '',
      credit: '',
      SuperAdmin: ''
    })
    const studentupdateform = reactive({
      name: '',
      gender: '',
      class: '',
      account: '',
      credit: '',
      SuperAdmin: ''
    })
    const stateStudent = reactive({
      index: '',
      id: ''
    })

    function handleClose(done) {
      proxy.$confirm('确认？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
    }

    function handleClose1(done) {
      proxy.$confirm('请确认是否提交该学生信息？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
    }

    console.log("子页面的id"+proxy.YouthLeaguePartySecretaryBiographyStudent)
    const Manager_id=proxy.YouthLeaguePartySecretaryBiographyStudent

    //获取所属学生列表
    getLocalStudentOfThePS(Manager_id).then((result) => {
      //前后端连接成功
      console.log("前后端连接成功")
      const msg = result.data.msg;
      //打印返回结果状态，
      if (result.data.status == 1) {
        ElMessage.error(msg);
      } else {
        //打印后端获取的用户列表数据
        console.log(result.data.result)
        proxy.tableData = result.data.result
        console.log(proxy.tableData)
        // console.log(msg)
        // ElMessage.success({
        //   message:msg,type:'success'});

      }
    }).catch(() => {

      console.log("获取列表失败")
      const msg = "获取列表失败！请稍后尝试！";
      ElMessage.error(msg);
    })

    const searchbox = () => {
      proxy.searchshow = !proxy.searchshow
    }

//添加
    const onSubmit = async () => {
      const form = unref(ruleFormsss);
      const studentadd_data = qs.stringify(studentaddform)
      if (!form) return
      try {
        //数据打印
        console.log(studentadd_data)

        proxy.$confirm('此操作将添加该学生信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          addStudentInfo(studentadd_data).then(result => {
            //前后端连接成功
            console.log("前后端连接成功")
            const msg = result.data.msg;
            //打印返回结果状态，
            if (result.data.status == 1) {
              ElMessage.error(msg);
              proxy.drawer = false
            } else {
              console.log(msg)

              proxy.tableData.splice(100, 1, proxy.studentaddform)
              proxy.drawer = false
              window.location.href = 'http://localhost:8080/f';
              ElMessage.success({
                message: msg, type: 'success'
              });
            }
            // proxy.reload()
          }).catch(err => {

          })
          // proxy.$message({
          //   type: 'success',
          //   message: '添加成功!'
          // });
        }).catch(() => {
          proxy.$message({
            type: 'info',
            message: '已取消添加'
          });
        });

        console.log("成功发送添加请求")

      } catch (error) {
      }
    }
//发送学生个人信息修改数据
    const editStudentInfo_Submit = () => {
      console.log(proxy.stateStudent.index + '-----------------')
      let index = proxy.stateStudent.index;
      let id = proxy.stateStudent.id;
      console.log(index + '--------' + id)
      const form = unref(ruleFormsss);
      const update = JSON.parse(JSON.stringify(studentupdateform))
      const editStudentInfo_data = decodeURI(qs.stringify(update))

      if (!form) return
      try {
        //数据打印
        console.log(editStudentInfo_data)
        //执行post
        editStudentInfo(id, editStudentInfo_data).then((result) => {
          //前后端连接成功
          console.log("前后端连接成功")
          console.log(id)

          const msg = result.data.msg;
          //打印返回结果状态，
          if (result.data.status == 1) {
            ElMessage.error(msg);
          } else {
            // proxy.$set(proxy.studentupdateform,index,1)
            proxy.tableData.splice(index, 1, proxy.studentupdateform)
            proxy.drawerupdate = false
            window.location.href = 'http://localhost:8080/f';
            console.log(msg)
            ElMessage.success({
              message: msg, type: 'success'
            });

          }
        }).catch(() => {

          console.log("no")
          const msg = "更新失败！请稍后尝试！";
          ElMessage.error(msg);
        })

        //
        console.log("成功发送更新请求")

      } catch (error) {
      }
    }

//获取学生个人信息学生
    function handleEdit(index, row) {
      console.log(index, row);
      //代理获取属性
      const proxydata = new Proxy(row, {
        get(target, key, receiver) {
          const result = Reflect.get(target, key, receiver)
          console.log('get', key)
          return result
        }
      })
      proxydata.id;
      console.log(proxydata.id)
      const params = proxydata.id
      getStudentInfo(params).then(result => {
        //前后端连接成功
        console.log("前后端连接成功")
        const msg = result.data.msg;
        //打印返回结果状态，
        if (result.data.status == 1) {
          ElMessage.error(msg);
        } else {
          //打印后端获取的用户信息数据
          console.log(result.data.result)
          let editData = result.data.result
          proxy.studentupdateform.name = editData[0].name
          proxy.studentupdateform.gender = editData[0].gender
          proxy.studentupdateform.class = editData[0].class
          proxy.studentupdateform.account = editData[0].account
          proxy.studentupdateform.credit = editData[0].credit
          proxy.studentupdateform.SuperAdmin = editData[0].SuperAdmin
          console.log(msg)
          ElMessage.success({
            message: msg, type: 'success'
          });

        }
      }).catch(() => {

        console.log("获取列表失败")
        const msg = "获取列表失败！请稍后尝试！";
        ElMessage.error(msg);

      })
      proxy.stateStudent.index = index;
      proxy.stateStudent.id = params;
    }

    //删除学生
    function handleDelete(index, row) {
      console.log(index, row);
      //代理获取属性
      const proxydata = new Proxy(row, {
        get(target, key, receiver) {
          const result = Reflect.get(target, key, receiver)
          console.log('get', key)
          return result
        }
      })
      proxydata.id;
      console.log(proxydata.id)
      const params = proxydata.id
      proxy.$confirm('此操作不可逆，将删除该学生的所有记录, 是否继续?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteStudent(params).then(result => {
          proxy.tableData.splice(index, 1)
        }).catch(err => {

        })
        proxy.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        proxy.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
    function closeTag(){
      const change=0
     proxy.$emit('change',change)
      //proxy.$router.back();
    }

    return{
      studentaddform,
      studentupdateform,
      onSubmit,
      editStudentInfo_Submit,
      ruleFormsss,
      handleEdit,
      handleDelete,
      getAllStudentInfo,
      searchbox,
      stateStudent,
      handleClose,
      handleClose1,
      props,
      closeTag
    }
  }
}
</script>
